<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title"/>
		<view class="list">
			<view class="item" @click="openPawPopup">
				<text>设定密码</text>
				<view class="icon">
					<text>{{passwordStates}}</text>
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
				</view>
			</view>
			<view class="item" @click="gotoChangePhone">
				<text>手机绑定</text>
				<view class="icon">
					<text>{{Phone}}</text>
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
				</view>
			</view>
			<view class="item" @click="OpenBindPopup('bottom')">
				<text>第三方绑定</text>
				<view class="icon">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
				</view>
			</view>
		</view>
		<view class="list" style="margin-top: 20rpx; !important">
			<view class="item" @click="gotoBlackList">
				<text>黑名单</text>
				<view class="icon">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
				</view>
			</view>
		</view>
		<view class="list" style="margin-top: 20rpx; !important">
			<view class="item d-flex d-flex-middle" style="border-bottom: 0;">
				<text>搭子铃推荐</text>
				<switch :checked="$store.state.isBell" @change="switchChange1" color="#e8b2dc" style="transform:scale(0.7)"/>
			</view>
		</view>
		<view class="px-3 py-1 font26 color999">
			开启过后将会为你弹窗推荐合适的游戏搭子
		</view>
		
		<view class="list" style="margin-top: 20rpx; !important">
			<view class="item d-flex d-flex-middle" style="border-bottom: 0;">
				<text>广场个性化推荐</text>
				<switch :checked="$store.state.isSquare" @change="switchChange2" color="#e8b2dc" style="transform:scale(0.7)"/>
			</view>
		</view>
		<view class="px-3 py-1 font26 color999">
			开启过后将会为你推荐个性化的广场内容
		</view>
		
		<view class="list" style="margin-top: 20rpx; !important">
			<view class="item d-flex d-flex-middle" style="border-bottom: 0;">
				<text>首页搭子卡定向推荐</text>
				<switch :checked="$store.state.isRecomend" @change="switchChange3" color="#e8b2dc" style="transform:scale(0.7)"/>
			</view>
		</view>
		<view class="px-3 py-1 font26 color999">
			开启过后首页将会为你推荐符合你需求的游戏搭子卡片
		</view>
		
		<view class="list" style="margin-top: 20rpx; !important">
			<view class="item d-flex d-flex-middle" style="border-bottom: 0;">
				<text>个性化数据收集</text>
				<switch :checked="$store.state.isPersonal" @change="switchChange4" color="#e8b2dc" style="transform:scale(0.7)"/>
			</view>
		</view>
		<view class="px-3 py-1 font26 color999">
			开启过后，平台会记录的行为喜好，平台给你做个性化推荐
		</view>
		
		
		<uni-popup ref="editPswPopup" background-color="#fff" border-radius="8px 8px 8px 8px">
			<view class="popup-content editPsw" style="height: 400rpx;position: relative;width: 500rpx;">
			    <view class="text-center font32">修改密码</view>
			    <input class="uni-input" 
			           type="text" 
						:password="showPassword1"
			           maxlength="9" 
			           placeholder="新密码，需输入6位以上含数字和字母" 
			           v-model="changeNike" 
			           style="margin-top: 20rpx;" />
			    <view @click="togglePasswordVisibility('showPassword1')" class="position-relative" style="left: 460rpx;top: -59rpx;"> 
			        <image v-if="showPassword1" 
			               src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250103093128.png" 
			               style="width: 35rpx;height: 35rpx;" />
			        <image v-if="!showPassword1" 
			               src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250103093138.png" 
			               style="width: 35rpx;height: 35rpx;" />
			    </view>
			    <input class="uni-input" 
			           type="text"
			        :password="showPassword2"
			           maxlength="9" 
			           placeholder="请再次输入新的密码" 
			           v-model="password" 
			           style="margin-top: 0;" />
			    <view @click="togglePasswordVisibility('showPassword2')" class="position-relative" style="left: 460rpx; top: -58rpx;">
			        <image v-if="showPassword2" 
			               src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250103093128.png" 
			               style="width: 35rpx;height: 35rpx;" />
			        <image v-if="!showPassword2" 
			               src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250103093138.png" 
			               style="width: 35rpx;height: 35rpx;" />
			    </view>
			    <view class="desc" style="margin-top: -27rpx;">最多可输入9个字符，支持中英文、数字、符号</view>
			    <view class="btn d-flex position-absolute">
			        <view class="cancle text-center font28" style="width: 50%; line-height: 90rpx; border-right: 1px solid #ededed;" @click="ColsePawePopup1">取消</view>
			        <view class="confirm text-center font28" style="width: 50%; line-height: 90rpx;" @click="ColsePawePopup2">确认</view>
			    </view>
			</view>
		</uni-popup>
		
		<uni-popup ref="editPhonePopup" background-color="#fff" border-radius="8px 8px 8px 8px">
			<view class="popup-content editPsw" style="height: 400rpx;position: relative;width: 500rpx;">
				<view class="text-center font32">绑定手机号</view>
				<input class="uni-input"
					   type="number"
					   maxlength="11" 
					   placeholder="请输入需要绑定的手机号" 
					   v-model="phone" 
					   style="margin-top: 20rpx;" />
				<input class="uni-input"
					   type="number"
					   placeholder="请输入验证码" 
					   v-model="code" 
					   style="margin-top: 40rpx;" />
					<view @click="sendCode(1)" style="position: absolute;right: 72rpx;top: 230rpx;" :style="{color: SendBtnColor}">{{SendBtnText}}</view>
				<view class="btn d-flex position-absolute">
					<view class="cancle text-center font28" style="width: 50%; line-height: 90rpx; border-right: 1px solid #ededed;" @click="ColsePawePopup3">取消</view>
					<view class="confirm text-center font28" style="width: 50%; line-height: 90rpx;" @click="ColsePawePopup4">确认</view>
				</view>
			</view>
		</uni-popup>	
		
		<uni-popup ref="BindPopup" background-color="#fff" border-radius="8px 8px 0 0">
			<view class="popup-content pt-4">
				<view class="ml-3 mb-4" style="color: #a09ea1;">第三方账号</view>
				<view class="d-flex d-flex-middle d-flex-between ml-3 mt-2">
					<view class="d-flex d-flex-middle">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1.png" mode="heightFix" style="height: 42rpx; width: 42rpx;"></image>
						<text class="font32 ml-2">微信</text>
						<text v-if="WeChatNikeName" class="font28 ml-2 color666">({{ WeChatNikeName }})</text>
					</view>
					<view class="d-flex-btn mr-3">
						<view v-if="!isBindWechat" class="mr-2 font30" style="color: #70dec1;" @click="wxLoginApp">点击绑定</view>
						<view v-else class="mr-2 font30 color666">已绑定</view>
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png" style="width: 10rpx; height: 20rpx; transform: rotate(180deg);"></image>
					</view>
				</view>
				<view class="d-flex d-flex-middle d-flex-between ml-3 my-4">
					<view class="d-flex d-flex-middle">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/QQ.png" mode="heightFix" style="height: 42rpx; width: 42rpx;"></image>
						<text class="font32 ml-2">QQ</text>
						<text v-if="QQNikeName" class="font28 ml-2 color666">({{ QQNikeName }})</text>
					</view>
					<view class="d-flex-btn mr-3">
						<view v-if="!isBindQQ" class="mr-2 font30" style="color: #70dec1;" @click="qqLoginApp">点击绑定</view>
						<view v-else class="mr-2 font30 color666">已绑定</view>
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png" style="width: 10rpx; height: 20rpx; transform: rotate(180deg);"></image>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import store from '@/store/index.js';
	import { userApi } from '../../http/userApi';
	export default {
		data() {
			return {
				display: "none;",
				bgcolor: "#fff",
				title: '隐私与安全',
				changeNike: '',
				isBindWechat: false,
				WeChatNikeName: null,
				QQNikeName: null,
				isBindQQ: false,
				SendBtnText: '发送验证码',
				password: '',
				phone:'',
				code:'',
				SendBtnColor: '#121212',
				showPassword1: true,
				showPassword2: true,
				param:{},
				totalTime: 60,
				passwordStates:'',
				sendParams:{
					phone: '',
					actionCode: 'user_valid_code'
				},
				checkParams:{
					phone: '',
					code: '',
					actionCode: 'real_name_valid_code'
				}
			}
		},
		onShow() {
			this.passwordStates=this.$store.state.user.setPasswordFlag?'已设置':'未设置'
			this.changeNike='';
			this.password='';
			this.ThirdPartyBindInfo()
		},
		components: {TitleBarVue},
		methods: {
			switchChange1: function(event) {
				store.commit('setBell',event.detail.value)
			},
			switchChange2: function(event) {
				store.commit('setSquare',event.detail.value)
			},
			switchChange3: function(event) {
				store.commit('setHotRecommend',event.detail.value)
			},
			switchChange4: function(event) {
				store.commit('setPersonal',event.detail.value)
			},
			async updatePassword(){
				let res=await userApi.updatePassword(this.param);
			},
			async editPhone(){
				let param={
					phone:this.phone
				}
				let res=await userApi.editUserInfo(param);
			},
			async CheckCode(){
				let res = await userApi.CheckCode(this.checkParams)
				if(!res){
					this.$store.state.user.phone=this.phone;
					this.editPhone();
					uni.showToast({
						title:'绑定手机号成功',
						icon:'none',
					})
					this.ColsePawePopup3();
				}else{
					uni.showToast({
						title:'验证码错误',
						icon:'none',
					})
				}
			},
			togglePasswordVisibility(type) {
			    this[type] = !this[type];
			},
			async sendCode(i){
				let that = this
				that.sendParams.phone=that.phone;
				if(that.totalTime == 60){
					try{
						uni.showLoading({
							title:'发送中'
						})
						let res = await userApi.sendCode(that.phone)
						uni.hideLoading()
						if(i==1){
							that.startTimer();
						}else{
							that.startTimer2();
						}
					}catch(e){
						uni.hideLoading()
					}
				}
			},
			startTimer() {
				if (this.timer) return;
				this.totalTime--;
				this.SendBtnText = `发送验证码(${this.totalTime})`;
				this.SendBtnColor = '#a6a6a6'
				this.timer = setInterval(() => {
				    if (this.totalTime <= 0) {
				        clearInterval(this.timer);
				        this.timer = null;
				        this.SendBtnText = '发送验证码';
						this.totalTime = 60
						this.SendBtnColor = '#121212'
				    } else {
				        this.totalTime--;
				        this.SendBtnText = `发送验证码(${this.totalTime})`;
						this.SendBtnColor = '#a6a6a6'
				    }
				}, 1000);
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			openPawPopup(type) {
				this.type = type
				this.$refs.editPswPopup.open(type)
			},
			openPhonePopup(type){
				this.type = type
				this.$refs.editPhonePopup.open(type)
			},
			ColsePawePopup3(){
				this.phone='',
				this.code='',
				this.$refs.editPhonePopup.close()
			},
			ColsePawePopup4(){//确认
				const regex = /^1[3-9]\d{9}$/;
				if(regex.test(this.phone)){
					this.checkParams.phone=this.phone;
					this.checkParams.code=this.code;
					this.CheckCode();
				}else{
					uni.showToast({
						title:'手机号格式不正确',
						icon:'none',
					})
				}
			},
			ColsePawePopup1() {
				this.changeNike='',
				this.password=''
				this.$refs.editPswPopup.close()
			},
			ColsePawePopup2() {
				if(this.$store.state.user.phone==null||this.$store.state.user.phone==''){
					uni.showToast({
					    title: '请绑定手机号',
					    icon: 'none', // 使用'none'图标，只显示文字
					    duration: 2000 // 显示持续时间
					  });
					return
				}
				if(this.changeNike===this.password&&this.password!==''&&this.changeNike!==''){
					this.param.password=this.password;
					this.updatePassword();
					uni.showToast({
					    title: '修改成功',
					    icon: 'none', // 使用'none'图标，只显示文字
					    duration: 2000 // 显示持续时间
					  });
					  this.passwordStates='已设置'
				} else {
					uni.showToast({
					    title: '密码输入有误，请重新输入',
					    icon: 'none', // 使用'none'图标，只显示文字
					    duration: 2000 // 显示持续时间
					});
					this.changeNike='',
					this.password=''
					return
				}
				this.$refs.editPswPopup.close()
			},
			OpenBindPopup(type) {
				this.type = type
				this.$refs.BindPopup.open(type)
			},
			CloseBindPopup() {
				this.$refs.BindPopup.close()
			},
			async ThirdPartyBindInfo() {
				let res = await userApi.ThirdPartyBindInfo()
				if(res.length) {
					res.forEach(i => {
						if(i.source === 1) {
							this.isBindWechat = true
							let WeChatUserInfo = JSON.parse(JSON.parse(i.userJson))
							this.WeChatNikeName = WeChatUserInfo.nickName
						}
						if(i.source === 2) {
							this.isBindQQ = true
							let QQUserInfo = JSON.parse(JSON.parse(i.userJson))
							this.QQNikeName = QQUserInfo.nickName
						}
					})
				} else {
					console.log('没有绑定第三方账号');
				}
				
			},
			async CreateThirdBind(type, userInfo) {
				let params = {
					source: type,
					userInfo: userInfo
				}
				let res = await userApi.CreateThirdBind(params)
				this.ThirdPartyBindInfo()
			},
			wxLoginApp(){
				// #ifdef APP-PLUS
				let that = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									uni.getUserInfo({
								        provider: 'weixin',
										onlyAuthorize: true,
								        success: function(infoRes) {
											let userInfo = JSON.stringify(infoRes.userInfo)
											that.CreateThirdBind(1, userInfo)
										},
										fail:function(err){
											uni.showToast({
												title:'微信授权登录失败！',
												icon:'none'
											})
										}
								    });
								},
								fail:function(err){
									console.log('err',err)
									uni.showToast({
										title:'微信授权登录失败！！',
										icon:'none'
									})
								}
							})
						}
					},
					fail:function(e){
						uni.showToast({
							title:'微信授权登录失败！！！',
							icon:'none'
						})
					}
				})
			    // #endif
			},
			qqLoginApp(){
				let that = this
				uni.login({
				    provider: 'qq',
				    success: function(loginRes) {
				        const openid = loginRes.authResult.openid;
				        uni.getUserInfo({
				            provider: 'qq',
				            success: function(infoRes) {
				                let formdata = {
				                    nickName: infoRes.userInfo.nickname,
				                    gender: infoRes.userInfo.gender == '男' ? 1 : 2,
				                    headImgUrl: infoRes.userInfo.figureurl_qq_2,
				                    openId: openid,
				                };
								let userInfo = JSON.stringify(formdata)
								that.CreateThirdBind(2, userInfo)
				            },
				            fail: function(err) {
				                uni.showToast({
				                    title: '获取用户信息失败',
				                    icon: 'none',
				                    duration: 3000
				                });
				            }
				        });
				    },
				    fail: function(err) {
				        uni.showToast({
				            title: 'QQ登录授权失败',
				            icon: 'none',
				            duration: 3000
				        });
				    }
				});
			},
			gotoChangePhone() {
				if(this.$store.state.user.phone==null||this.$store.state.user.phone==''){
					this.openPhonePopup();
				}else{
					uni.navigateTo({
						url: '/pagesApp/ChangPhone/ChangPhone'
					})
				}
			},
			gotoBlackList() {
				uni.navigateTo({
					url: '/pagesApp/BlackList/BlackList'
				})
			}
		},
		computed: {
			Phone() {
				let phone = this.$store.state.user.phone
				return phone.substr(0, 3) + "****" + phone.substr(7)
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #f4f5fa;
	overflow: hidden;
	.content {
		width: 100%;
	}
	.list {
		background-color: #fff;
		margin: 170rpx 0 0;
		padding: 0 0rpx 0 30rpx;
		.item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1px solid rgba(204, 204, 204, .3);
			text {
				font-size: 28rpx;
				color: #555;
			}
			.icon {
				image {
					margin: 0 30rpx 8rpx 12rpx;
					width: 10rpx;
					height: 20rpx;
					transform: rotate(180deg);
				}
				text {
					font-size: 28rpx;
				}
			}
		}
	}
	.eye-icon {
	    cursor: pointer;
	    font-size: 20px;
	    margin-left: -30px;
	    color: #888;
	    position: relative;
	    top: 10px;
	    z-index: 1;
	}
	.popup_box {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .4);
		position: fixed;
		top: 0;
		left: 0;
		.PswPopup {
			width: 450rpx;
			height: 500rpx;
			border-radius: 30rpx;
			background-color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50% ,-50%);
			padding: 0 50rpx;
			overflow: hidden;
			.title {
				width: 100%;
				font-size: 36rpx;
				display: flex;
				justify-content: center;
				padding: 30rpx 0;
			}
			input {
				height: 80rpx;
				border-bottom: 1px solid #ccc;
				font-size: 24rpx;
				margin-bottom: 10rpx;
				padding-left: 15rpx;
				font-weight: normal;
			}
			.btns {
				height: 60rpx;
				margin-top: 60rpx;
				float: right;
				button {
					padding: 8rpx 40rpx;
					border-radius: 15rpx;
					margin: 0 30rpx;
				}
			}
		}
	}
}
.title {
	display: flex;
	align-items: center;
	height: 80rpx;
	padding-right: 47rpx;
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 32rpx;
		text-align: center;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
.editPsw {
	padding: 40rpx 60rpx 0;
	color: #1f1f1f;
	input {
		box-sizing: border-box;
		border-radius: 10rpx;
		color: #333333;
		font-size: 26rpx;
		width: 100%;
		margin-top: 50rpx;
		height: 70rpx;
		padding-left: 20rpx;
		background-color: #efefef;
	}
	.desc {
		margin-top: 25rpx;
		font-size: 22rpx;
		color: #888888;
	}
	.btn {
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90rpx;
		border-top: 1px solid #ededed;
	}
	.cancle {
		color: #9E9D9D;
	}
	.confirm {
		color: #66CCCC;
	}
}
.position-relative {
	position: relative;
	z-index: 1;
}

.uni-input {
	position: relative;
	z-index: 0;
}

/* 添加点击区域样式 */
.position-relative {
	cursor: pointer;

}

/* 确保图片可以正常点击 */
.position-relative image {
	pointer-events: none;
}
</style>
